<template>
  <div :style="{ padding: '10px 100px 0px 100px' }">
    <a-button class="create-album-button" @click="showCreateModal()"
      >新建相册</a-button
    >
    <a-divider :style="{ marginTop: '10px', marginBottom: '20px' }" />
    <div class="album-list">
      <a-card
        hoverable
        class="album-box"
        v-for="(album, index) in data"
        :key="index"
        :style="{ width: '250px', borderRadius: '5px' }"
        :title="album.name"
        size="small"
      >
        <template #extra>
          <a-dropdown>
            <MoreOutlined />
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a-button
                    type="text"
                    size="small"
                    @click="showEditModal(album)"
                    >编辑相册信息</a-button
                  >
                </a-menu-item>
                <a-menu-item v-if="album.isDefaultAlbum === 0">
                  <a-button type="text" size="small" @click="del(album.albumId)"
                    >删除相册</a-button
                  >
                </a-menu-item>
                <a-menu-item v-if="data.length >= 2">
                  <a-button
                    type="text"
                    size="small"
                    @click="showUnitModal(album.albumId)"
                    >合并至其他相册
                  </a-button>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template #cover>
          <img
            alt="相册封面加载错误"
            @click="goTo(album)"
            :src="album.coverLink ? album.coverLink : defaultImg"
            :style="{ height: '220px' }"
          />
        </template>
        <a-card-meta size="small">
          <template #description>
            {{ album.description ? album.description : '无简介...' }}
          </template>
        </a-card-meta>
      </a-card>
    </div>

    <!-- 新建的弹窗 -->
    <a-modal v-model:visible="createVisible" title="新建相册">
      <a-form
        :model="createFormState"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 20 }"
      >
        <a-form-item
          label="相册名"
          :rules="[{ required: true, message: '请输入相册名!' }]"
        >
          <a-input v-model:value="createFormState.name" />
        </a-form-item>
        <a-form-item label="相册简介">
          <a-input v-model:value="createFormState.description" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelCreate()">取消</a-button>
        <a-button key="submit" type="primary" @click="create()">创建</a-button>
      </template>
    </a-modal>

    <!-- 修改的弹窗 -->
    <a-modal v-model:visible="editVisible" title="编辑相册信息">
      <a-form
        :model="editFormState"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 20 }"
      >
        <a-form-item
          label="相册名"
          name="name"
          :rules="[{ required: true, message: '请输入相册名!' }]"
        >
          <a-input v-model:value="editFormState.name" />
        </a-form-item>
        <a-form-item label="相册简介" name="description">
          <a-input v-model:value="editFormState.description" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelEdit()">取消</a-button>
        <a-button key="submit" type="primary" @click="edit()">提交</a-button>
      </template>
    </a-modal>

    <!-- 合并的弹窗 -->
    <a-modal v-model:visible="unitVisible" title="合并相册">
      <a-form :model="unitAlbumState">
        <a-form-item
          label="目标相册"
          name="targetAlbumId"
          :rules="[{ required: true, message: '请选择要合并到的相册!' }]"
        >
          <a-select
            v-model:value="unitAlbumState.targetAlbumId"
            placeholder="请选择相册"
          >
            <a-select-option
              v-for="(album, index) in optionAlbumList"
              :key="index"
              :value="album.albumId"
              >{{ album.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelUnit()">取消</a-button>
        <a-button key="submit" type="primary" @click="unit()">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { createVNode, defineComponent, onMounted, reactive, ref } from 'vue';
import {
  albumList,
  createAlbum,
  editAlbum,
  delAlbum,
  unitAlbum
} from '@/apis/album';
import { message, Modal } from 'ant-design-vue';
import { MoreOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

interface AlbumType {
  name: string;
  description: string;
  size: null | number;
  albumId: number;
  isDefaultAlbum: number;
  coverLink: null | string;
  createTime: string;
  updateTime: string;
}

interface CreateFormState {
  name: string;
  description: string;
  isDefaultAlbum: number;
}

interface EditFormState {
  albumId: number;
  name: string;
  description: string;
}

interface UnitAlbumState {
  originAlbumId: number;
  targetAlbumId: number;
}

export default defineComponent({
  components: {
    MoreOutlined
  },
  setup() {
    const defaultImg = require('@/assets/album.png');

    const data = ref<AlbumType[]>([]);
    const total = ref(0);

    const getAlbumList = () => {
      albumList().then((res) => {
        data.value = res.data.list;
        total.value = res.data.total;
      });
    };

    const createFormState = reactive<CreateFormState>({
      name: '',
      description: '',
      isDefaultAlbum: 0
    });

    const createVisible = ref<boolean>(false);

    const showCreateModal = () => {
      createFormState.name = '';
      createFormState.description = '';
      createFormState.isDefaultAlbum = 0;
      createVisible.value = true;
    };

    const create = () => {
      const { name, description, isDefaultAlbum } = createFormState;
      if (!name) {
        message.warn('相册名不能为空!');
      } else {
        createAlbum(name, description, isDefaultAlbum).then((res) => {
          message.success('新建相册成功！');
          getAlbumList();
          createVisible.value = false;
        });
      }
    };

    const cancelCreate = () => {
      createVisible.value = false;
    };

    const editVisible = ref<boolean>(false);
    const editFormState = reactive<EditFormState>({
      albumId: 0,
      name: '',
      description: ''
    });

    const showEditModal = (album: AlbumType) => {
      const { albumId, name, description } = album;
      editFormState.albumId = albumId;
      editFormState.name = name;
      editFormState.description = description;
      editVisible.value = true;
    };

    const edit = () => {
      const { albumId, name, description } = editFormState;
      editAlbum(albumId, name, description).then((res) => {
        message.success('编辑相册信息成功！');
        getAlbumList();
        editVisible.value = false;
      });
    };

    const cancelEdit = () => {
      editVisible.value = false;
    };

    const del = (albumId: number) => {
      Modal.confirm({
        content:
          '该操作会将相册内照片放入回收站,并删除该相册，您确定要进行操作吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        onOk() {
          delAlbum(albumId).then((res) => {
            message.success('删除相册成功，相册中照片已放入回收站！');
            getAlbumList();
          });
        },
        cancelText: '取消',
        onCancel() {
          Modal.destroyAll();
        }
      });
    };

    const unitVisible = ref<boolean>(false);
    const optionAlbumList = ref<AlbumType[]>([]);
    const unitAlbumState = reactive<UnitAlbumState>({
      originAlbumId: 0,
      targetAlbumId: 0
    });

    const showUnitModal = (originAlbumId: number) => {
      unitAlbumState.originAlbumId = originAlbumId;
      const albumFilter = (album: AlbumType) => {
        return album.albumId != originAlbumId;
      };
      optionAlbumList.value = data.value.filter(albumFilter);
      unitAlbumState.targetAlbumId = optionAlbumList.value[0].albumId;
      unitVisible.value = true;
    };

    const unit = () => {
      const { originAlbumId, targetAlbumId } = unitAlbumState;
      unitAlbum(originAlbumId, targetAlbumId).then((res) => {
        message.success('合并相册成功！');
        getAlbumList();
        unitVisible.value = false;
      });
    };

    const cancelUnit = () => {
      unitVisible.value = false;
    };

    const router = useRouter();
    const goTo = (album: AlbumType) => {
      router.push({
        path: '/picture',
        query: { albumId: album.albumId }
      });
    };

    onMounted(() => {
      document.onscroll = (e) => {};
    });

    return {
      defaultImg,
      data,
      total,
      getAlbumList,
      createVisible,
      showCreateModal,
      createFormState,
      create,
      cancelCreate,
      editVisible,
      showEditModal,
      editFormState,
      edit,
      cancelEdit,
      del,
      unitAlbumState,
      unitVisible,
      optionAlbumList,
      showUnitModal,
      unit,
      cancelUnit,
      goTo
    };
  },
  created() {
    this.getAlbumList();
  }
});
</script>

<style lang="less" scoped>
.album-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  .album-box {
    margin-right: 20px;
    margin-bottom: 20px;
    width: 250px;
    border-radius: 10px;
    :global(.ant-card-cover img) {
      border: 1px solid #f0f0f0;
    }
  }
}
</style>
